<html>
<head>
<title>Animationt</title>

<style>
#fone{
position:absolute;
left:400px;
top:500px;
}

#rocket{
position:absolute;
left:400px;
top:500px;
}

</style>

<script>
xpos=400;
ypos=100;
xpos2=400;
ypos2=500;
rx=500;
ry=500;
var timer;

function moveleft(id){
     xpos2=xpos2-10;
     obj=document.getElementById(id);
     obj.style.left=xpos2 +"px";
}

function moveright(id){
     xpos2=xpos2+10;
     obj=document.getElementById(id);
     obj.style.left=xpos2 +"px";
}



function checkKey(){
     Key = window.event.keyCode;
    if (Key != 0){
   switch(Key){
     case 13:fire();
     case 108: moveleft("fone");break;
     case 114:moveright("fone");break;

   }
}
}

function moverocket(){
ry=ry-10;
obj=document.getElementById("rocket");
obj.style.left=rx;     
obj.style.top=ry +"px";
}

function fire(){
rx=xpos2;
ry=ypos2;
obj=document.getElementById("rocket");
obj.style.left=rx;     
obj.style.top=ry +"px";
timer=setInterval("moverocket()",50);
}


</script>


</head>

<body  onkeypress="checkKey(); ">
<p><img id="fone" src="/resources/players/green.gif" alt="fone" width="64" height="64" onclick="clearInterval(timer);fire()"> </p>
<p><img id="rocket" src="/resources/players/steelball.gif" alt="rocket" > </p>
<p>l=left; r=right; <enter>=fire</p>
<p>&nbsp;</p>

</body>
</html>
